<template>
	<div class="password" :class="display">
		<group>
	      	<x-input v-model="form.password" placeholder="密码" type="password"></x-input>
	      	<x-input v-model="form.password_confirmation" placeholder="确认密码" type="password"></x-input>
		</group>
		<div class="btn">
			<x-button  @click.native="password" >{{btnText}}</x-button>
		</div>
	</div>
</template>
<script>
	import { XInput, Group,XButton} from 'vux'

	import Va from 'async-validator';

	const formRule = {
		password : [
			{type : "string" , required: true , message : '请填写密码'},
			{type : "string" , min: 6 , max: 15 , message : '密码6-15位'}
		],
	  	password_confirmation: {type : "string" , required: true , message : '请填写确认密码'},
	};

	export default {
		props :{
	        btnText :  {
	            type: String,
	            required : true,
	        },
	        display :  {
	            type: String,
	            default : '',
	            required : true,
	        },
	        callback :  {
	            type: Function,
	            required : true,
	        },
		},
		components:{
			XInput,
		    Group,
			XButton,
        },
        data (){
	        return{
	        	form :{
	            	phone : '',
	            	phonekey : '',
	            	code : '',
	            	key : '',
	            	password : '',
	            	password_confirmation : '',
	            },
	            formBool : true,
	        }
	    },
	    methods: {
	    	//数据验证
			formValidate(){
				this.formBool = true;
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$vux.toast.show({type : 'text', text: errors[0].message});
				  		this.formBool = false;
				  	}
				});
			},
	    	password(){
	    		this.formValidate();
				if(this.formBool==false) return false;
				if(this.form.password!=this.form.password_confirmation){
					this.$vux.toast.show({type : 'text', text: '密码不相同'});return false;
				}
				this.callback(this.form);
	    	},
	    },
	    created :function(){
	    }
	}
</script>
<style>
	.password .btn{margin-top: 15px;}
	.password.show{display: initial;}
	.password.hide{display: none;}
</style>